<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 2px;
            /* background-color: red; */
            position: relative;
        }
        .box1::before{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-image: linear-gradient(to bottom,transparent 50%,blue 50%);
        }
    </style>
</head>

<body>
    
    <div class="box1"></div>
</body>
<script>
    /*
        如何回答呢？
        我一般是看情况的，如果只是要一条0.5px的分割线，我一般是采用伪元素设置绝对定位，然后给他设置height为1px，
        在使用background-image，通过渐变方法50%透明，50%目标颜色
        如果是要0.5px的边框，
        我还是采用伪元素，通过绝对定位， 并且给这个伪元素设置宽高为200%，设置1px的border，再通过css3的transform属性，缩放0.5
    */
</script>
</html>